<template>
  <topBg />
  <bodyBg />

  <div class="canvas">
    <div
      v-for="(item, index) in canvasLoadItems"
      :key="item.id"
      class="dragDiv cloned"
      :style="[
        'left:' + item.x + 'px;top:' + item.y + 'px;',
        '' + item.containerStyle + '',
      ]"
    >
      <component
        :is="item.bgPath"
        :styleObj="{
          width: 'calc(100% - 25px)',
          height: getDynamicHeight(item.containerStyle),
        }"
      />
      <div :style="'' + item.chartStyle + ''">
        <component :is="item.path" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import topBg from "./visualization/bodyBg/topBg.vue";
import bodyBg from "./visualization/bodyBg/bgDiv.vue";
import { ref, onMounted } from "vue";
import Http from "../api/http";
import { Notification } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const canvasLoadItems = ref<any[]>([]);

const aa = (bb: any) => {
  return import(/* @vite-ignore */ bb);
};

onMounted(() => {
  Http.get("/largeScreen/checked/listAll").then(async(res) => {
    if (res.code === 200) {
      let data = res.data;
      for (let i = 0; i < data.length; i++) {
        let aaFun = await aa(data[i].path);
        let bbFun = await aa(data[i].bgPath);
        const newItem = {
          id: Date.now(),
          x: data[i].xPoint,
          y: data[i].yPoint,
          name: data[i].name,
          pathVal: data[i].path,
          bgPathVal: data[i].bgPath,
          bgPath: bbFun.default,
          path: aaFun.default,
          chartStyle: data[i].chartStyle,
          containerStyle: data[i].containerStyle,
          remart: data[i].remart,
          category: data[i].category,
          chartStyle2: data[i].chartStyle2,
          controlId: data[i].controlId,
        };
        canvasLoadItems.value.push(newItem);
      }
    }
  });
});

const getDynamicHeight = (str) => {
  const heightMatch = str.match(/height:([^;]+)/);
  let heightVal: String | null = null;
  if (heightMatch[1]) {
    const heightNumber = heightMatch[1].match(/\d+/)[0]; // 结果为 "300" (字符串)
    // 如果需要数字类型可以转换
    const heightNum = Number(heightNumber);
    heightVal = heightNum - 25 + "px";
  }

  return heightMatch ? heightVal : "260px";
};
</script>
<style scoped>
.canvas {
  position: relative;
  width: 100%;
  height: 100%;
}
.dragDiv {
  min-width: 350px;
  min-height: 300px;
}
.cloned {
  position: absolute;
  cursor: move;
}
</style>
